<template>
	<div class="control-list" :action="action">
		<div class="title">
			<div class="text">
				<i class="fa-duotone fa-grid-horizontal" style="color: #0052cc; padding: 0 5px" />
				<span>系统组件</span>
			</div>
			<div class="fold" @click="foldClick"><i class="fa-sharp-duotone fa-solid fa-chevron-down" /></div>
		</div>
		<div class="content">
			<div class="group" v-for="(group, index) in list">
				<div class="title">{{ group.label }}</div>
				<draggable class="draggable" :list="group.list.sort((x, y) => x.sort - y.sort)" :clone="cloneComponent"
					:group="{ name: 'in-form-designer-darggable-group', pull: 'clone', put: false }" :sort="false"
					item-key="name">
					<template #item="{ element, index }">
						<div class="item">
							<div class="icon"><i :class="element.icon" /></div>
							<div class="label">{{ element.label }}</div>
						</div>
					</template>
				</draggable>
			</div>
		</div>
	</div>
</template>
<script setup>
import lodash from "lodash";
import controls from "../../controls";
const list = controls.get();
const action = ref(false);
const foldClick = (e) => {
	action.value = !action.value;
};

const cloneComponent = (e) => {
	return lodash.cloneDeep(e);
};
</script>

<style scoped>
.control-list {
	box-sizing: border-box;
	background-color: #fff;
	overflow: hidden;

	&[action=true] {
		width: 40px;
		transition: width .5s;

		.content {
			display: none;
		}

		.title {
			.text {
				display: none;
			}

			.fold {
				padding: 5px 11px;
				margin: 0 2px;
				transform: rotate(180deg);
				transition: all .2s;
			}
		}
	}

	>.title {
		font-size: 18px;
		height: 40px;
		display: flex;
		align-items: center;
		margin-bottom: 5px;
		box-sizing: border-box;
		border-bottom: 1px solid #eee;
		justify-content: space-between;
		justify-items: flex-start;

		.fold {
			padding: 2px 10px;
			margin: 0 4px;
			border-radius: 7px;
			cursor: pointer;

			i {
				transform: rotate(90deg);
				transition: rotate .5s;
			}

			&:hover {
				background-color: #eee;
				color: #0052cc;
				transition: box-shadow 0.5s, background-color 0.6s;
			}
		}
	}
}
</style>